/* src/frontend/static/css/compiler.css */


/* 工作区整体样式 */
.code-workspace {
    gap: 1.5rem !important;
    padding: 1rem !important;
}


/* 调整代码区域的样式 */
.code-editor textarea {
    font-family: 'Fira Code', monospace;  /* 使用等宽字体 */
    font-size: 18px !important;
    padding: 12px !important;
}


/* 输出卡片样式 */
.output-card {
    background: white !important;
    border-radius: 12px !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08) !important;
    padding: 1.25rem !important;
    border: 1px solid #e0e0e0 !important;
}


/* Code 编辑器整体容器 */
.code-editor-container {
    margin: 1rem 0 !important;
    border-radius: 8px !important;
    overflow: hidden !important;
    border: 1px solid #e0e0e0 !important;
    background: #ffffff !important;
}


.scrollable {
    height: 80vh;  /* 改用视窗高度的百分比 */
    overflow-y: auto;
    padding: 5px;
    display: block;
    overflow-x: hidden;
}

/* 添加组件之间的间距 */
.scrollable > div {
    margin-bottom: 8px !important;  /* 组件之间的垂直间距 */
}

/* 添加响应式布局支持 */
@media (max-width: 768px) {
    .column-container {
        flex-direction: column;  /* 在小屏幕上改为垂直布局 */
        height: auto;
        gap: 8px;
    }
    
    .scrollable-column {
        height: 60vh;  /* 在小屏幕上减小高度 */
        padding: 6px;
    }
}



